<!DOCTYPE html>
<html>

<head>
    <title>Make Your Own Bingo Card</title>
    <link rel="stylesheet" href="script01.css">
    <script src="script01.js"></script>
    <style>
        body {
            background-color: white;
            color: black;
            font-size: 20px;
            font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
        }
        
        #content {
            width: 500px;
            margin: auto auto;
            align-items: center;
            text-align: center;
            background-color: rgb(255, 255, 255);
            box-shadow: grey 2px 2px 5px;
            padding: 10px;
            border-radius: 20px;
        }
        
        h1,
        th {
            font-family: Georgia, "Times New Roman", Times, serif;
        }
        
        h1 {
            font-size: 28px;
        }
        
        table {
            border-collapse: collapse;
            width: 450px;
            margin: 10px auto;
        }
        
        thead {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            overflow: hidden;
        }
        
        th,
        td {
            padding: 10px;
            border: 2px #666 solid;
            text-align: center;
            width: 20%;
        }
        
        #free,
        .pickedBG {
            background-color: #f66;
        }
        
        .winningBG {
            background-image: url(images/redFlash.gif);
        }
        
        #reload {
            text-decoration: none;
            background-color: rgb(9, 102, 223);
            padding: 5px;
            border-radius: 5px;
            color: rgb(255, 255, 255);
            box-shadow: grey 1px 1px 3px;
        }
        
        #reload:hover {
            color: black;
        }
    </style>
</head>

<body>
    <div id="content">
        <h1>Create A Bingo Card</h1>
        <table>
            <thead>
                <th>B</th>
                <th>I</th>
                <th>N</th>
                <th>G</th>
                <th>O</th>
            </thead>
            <tr>
                <td id="square0">&nbsp;</td>
                <td id="square5">&nbsp;</td>
                <td id="square10">&nbsp;</td>
                <td id="square14">&nbsp;</td>
                <td id="square19">&nbsp;</td>
            </tr>
            <tr>
                <td id="square1">&nbsp;</td>
                <td id="square6">&nbsp;</td>
                <td id="square11">&nbsp;</td>
                <td id="square15">&nbsp;</td>
                <td id="square20">&nbsp;</td>
            </tr>
            <tr>
                <td id="square2">&nbsp;</td>
                <td id="square7">&nbsp;</td>
                <td id="free">Free</td>
                <td id="square16">&nbsp;</td>
                <td id="square21">&nbsp;</td>
            </tr>
            <tr>
                <td id="square3">&nbsp;</td>
                <td id="square8">&nbsp;</td>
                <td id="square12">&nbsp;</td>
                <td id="square17">&nbsp;</td>
                <td id="square22">&nbsp;</td>
            </tr>
            <tr>
                <td id="square4">&nbsp;</td>
                <td id="square9">&nbsp;</td>
                <td id="square13">&nbsp;</td>
                <td id="square18">&nbsp;</td>
                <td id="square23">&nbsp;</td>
            </tr>
        </table>
        <p><a href="07BingoCard.html" id="reload">Click here</a> to create a new card</p>
    </div>
    <script>
        window.onload = initAll;

        function initAll() {
            //判断当前浏览器是否支持当前对象
            if (document.getElementById) {
                for (var i = 0; i < 24; i++) {
                    setSquare(i);
                }
            } else {
                alert("You Brower doesn't support this script");
            }
        }

        function setSquare(thisSquare) {
            var colPlace = [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4];
            //计算每个方格的最小值
            var colBasic = colPlace[thisSquare] * 15;
            var newNum = colBasic + Math.floor(Math.random() * 15) + 1;
            document.getElementById("square" + thisSquare).innerHTML = newNum;
        }
    </script>
</body>

</html>